const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const AssetsPlugin=require('assets-webpack-plugin');// 进行代码缓存的预处理
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// 将css提取为单独文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');// css压缩
// 设置编译时的node环境变量 production
process.env.NODE_ENV = 'development';
const OUTPUT_FILENAME = "dist";

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'js/[name].[hash:14].js',
        path: path.join(__dirname, OUTPUT_FILENAME),
        publicPath: '/'
    },
    devServer: {
        contentBase: path.join(__dirname, OUTPUT_FILENAME),
        compress: true, // 启动gzip压缩
        port: 3000,
        open: false,
        hot: false
    },
    devtool: 'cheap-module-eval-source-map',   
    module: {
        rules: [
            { test: /\.vue$/, loader: 'vue-loader' },
            {
                test: /\.(less|css)$/,    
                use: [//vue-style-loader
                    MiniCssExtractPlugin.loader, 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        sourceMap: true,
                        plugins: () => {
                            require('postcss-preset-env')()
                        }
                    }
                }, 'less-loader'],
            },{
                test: /\.(jpg|png|jpeg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 12 * 1024,// 图片小于 8kb，处理为base64
                    // url-laoder 默认使用es6模块解析，关闭es6的模块化解析
                    esModule: false,
                    name: '[hash:14].[ext]',
                    outputPath: "images"
                }
            },
            { test: /\.html$/, loader: 'html-loader' },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:14].[ext]',
                    outputPath: "iconfont"
                }
            },
            // xml 数据解析
            // { test: /\.(csv|tsv)$/, use: ['csv-loader']},
            // { test: /\.xml$/, use: ['xml-loader']},
            {// 配置js 高版本兼容
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        // 配合 babel-polyfill (可以优化为按需加载,corejs)
                        presets: ['babel-preset-env'],
                        babelrc: false,// 不采用.babelrc的配置
                        plugins: ['dynamic-import-webpack']
                    }
                }],
                exclude: '/node_modules/'
            },
            {
                test: /\.(js|jsx)$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                exclude: /node_modules/,
                options: {
                    formatter: require('eslint-friendly-formatter'),
                },
            },
            {// 其他资源的处理
                exclude: /\.(css|js|vue|html|less|sass|jpg|jpeg|png|gif|woff|woff2|eot|ttf|otf|xml|csv|tsv|svg|json)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: "static"
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.vue', '.json' ],
        alias: {
            '@': path.join(__dirname, './src'),
            'public': path.join(__dirname, './public'),
            'page': path.join(__dirname, './src/compoments/'),
            'vue$': "vue/dist/vue.esm.js"
        }
    },
    node: {
        fs: 'empty',
        child_process: "empty"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '模块化服务构建',
            template: './public/index.html',
            favicon: './public/favicon.ico',
            minify: {
                collapseWhitespace: true,// 空格忽略
                removeComments: true,// 注释忽略
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[chunkhash:10].css',
            chunkFilename: "css/[name].[chunkhash:10].css"
        }),
        new AssetsPlugin({
            filename: OUTPUT_FILENAME+'/webpack.assets.js',
            processOutput:function(assets){
                return 'window.WEBPACK_ASSETS='+JSON.stringify(assets);
            }
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new VueLoaderPlugin(),
    ],
}